<template>
    <div class="app-container ">
        <div class="card">
            <el-card>
                <div class="card-body">
                    <div class="search">
                        <el-icon>
                            <Search />
                        </el-icon>
                        <span>筛选搜索</span>
                    </div>
                    <div>
                        <el-button type="primary" @click="getAdminList">查询搜索</el-button>
                    </div>
                </div>
                <el-form label-width="125px" :model="searchParams">
                    <el-form-item label="账号/姓名:">
                        <el-input label-width="150px" v-model="searchParams.keyword" placeholder="品牌名称或关键字" />
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <div class="list">
            <el-card>
                <div class="list-card">
                    <div class="data">
                        <el-icon :size="16">
                            <Tickets />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <el-button type="primary" @click="addBrand" v-permission="'addUser'">添加</el-button>
                </div>
            </el-card>
        </div>
        <!-- 品牌列表 -->
        <div class="table">
            <el-table :data="tabList" style="width: 100%" @selection-change="hdSelectChange">
                <el-table-column type="selection" width="50px" />
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column prop="name" label="品牌名称" />
                <el-table-column prop="firstLetter" label="品牌首字母" />
                <el-table-column prop="sort" label="排序" />
                <el-table-column label="品牌制造商">
                    <template #default="{ row }">
                        <el-switch v-model="row.factoryStatus" :active-value="1" :inactive-value="0"
                            @click="factoryBrand(row)" />
                    </template>
                </el-table-column>
                <el-table-column label="是否显示">
                    <template #default="{ row }">
                        <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0" @click="showBrand(row)" />
                    </template>
                </el-table-column>
                <el-table-column label="相关">
                    <span>商品：</span> <el-button size="small" link type="primary">100</el-button>
                    <span>评价：</span> <el-button size="small" link type="primary">1000</el-button>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                        <el-button size="small" @click="updateBrand(row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteBrand(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 批量操作 -->
        <el-select v-model="selectVal" class="m-2" placeholder="批量操作">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button @click="selectShowStatus" type="primary" style="margin-left: 20px;">确定</el-button>
    </div>
</template>

<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import * as http from '@/request/http'
import umsTable from '@/hooks/umsTable';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter()

//批量选择值
const selectVal = ref()
//品牌id
let ids = ref<number[]>([])
//批量选择
const options = [
    { value: 1, label: '显示品牌' },
    { value: 0, label: '隐藏品牌' },
]

//批量显示隐藏品牌
const selectShowStatus = () => {
    if (ids.value.length == 0) {
        ElMessage.warning('请选择一条记录')
        return
    } else if (selectVal.value != 0) {
        ElMessage.warning('请选择批量操作类型')
        return
    }
    else if (selectVal.value == 1) {
        console.log(selectVal.value);
        http.brand.brandShowUpdateId(ids.value, selectVal.value)
        getAdminList()
    } else if (selectVal.value == 0) {
        http.brand.brandShowUpdateId(ids.value, selectVal.value)
        getAdminList()
    }
}
//搜索关键字
const searchParams = reactive({
    keyword: ''
})

//品牌列表table
const { paginationParams, tabList, getAdminList, handleCurrentChange, handleSizeChange } = umsTable(http.brand.brandList, searchParams)

//品牌状态是否显示
const showBrand = (row: IBrand) => {
    ids.value.push(row.id)
    http.brand.brandShowUpdateId(ids.value, row.showStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功')
        } else {
            row.showStatus = row.showStatus == 1 ? 0 : 1
        }
    }).catch(() => {
        ElMessage.error('修改失败')
        row.showStatus = row.showStatus == 1 ? 0 : 1
    })
}
//品牌制造商状态
const factoryBrand = (row: IBrand) => {
    ids.value.push(row.id)
    http.brand.brandFactoryUpdateId(ids.value, row.factoryStatus).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功')
        } else {
            row.showStatus = row.factoryStatus == 1 ? 0 : 1
        }
    }).catch(() => {
        ElMessage.error('修改失败')
        row.showStatus = row.factoryStatus == 1 ? 0 : 1
    })
}
//获取勾选的品牌id
const hdSelectChange = (val: IBrand[]) => {
    ids.value = val.map(item => item.id
    )
}

//删除单个品牌
const deleteSingle = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该品牌',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.brand.brandDelete(id).then(_res => {
                ElMessage.success('删除成功')
                getAdminList()
            })
        })
}

//删除多个
const deleteBatch = () => {
    ElMessageBox.confirm(
        '是否要删除该品牌',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.brand.brandDeleteBatch(ids.value).then(_res => {
                ElMessage.success('删除成功')
                getAdminList()
            })
        })
}
//删除品牌
const deleteBrand = (id: number) => {
    if (ids.value.length > 0) {
        deleteBatch()
    } else {
        deleteSingle(id)
    }
}

//切换添加品牌
const addBrand = () => {
    router.push('addBrand')
}
//切换编辑品牌
const updateBrand = (id: number) => {
    router.push(`updateBrand?id=${id}`)
}

</script>

<style scoped lang="less">
.el-button {
    font-size: 12px;
}

.card {
    margin: 30px 0;

    .card-body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search {
            display: flex;
            align-items: center;
        }

        .el-icon {
            padding-right: 10px;
        }
    }

    .el-form {
        margin-top: 20px;

        .el-input {
            width: 200px;
            font-size: 12px;
        }
    }

}

.list {

    .list-card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .data {
            display: flex;
            align-items: center;
            font-size: 14px;

            .el-icon {
                padding-right: 10px;
            }
        }
    }
}

:deep(.table) {
    margin-top: 20px;

    .el-table {
        border: 1px solid #ebeef5;

    }

    .el-table__cell {
        border-right: 1px solid #ebeef5;
        color: #909399;
        font-size: 13px;
    }

    th {
        color: #909399;
        font-size: 13px;
    }

    .cell {
        text-align: center;
    }
}

.pagination {
    width: 100%;
    margin-top: 20px;

    .el-pagination {
        // justify-content: flex-end;
        float: right;
    }
}
</style>    
